import Vue from "vue";
// 引入路由器
import VueRouter from "vue-router";
// 引入路由组件
/* import Home from "../views/Home.vue";
import JingXi from "../views/JingXi.vue";
import PersonCenter from "../views/PersonCenter.vue";
import Login from "../views/Login.vue";
import Register from "../views/Register.vue"; */
// 路由懒加载
const Home = () => import('../views/Home.vue');
const JingXi = () => import('../views/JingXi.vue');
const PersonCenter = () => import('../views/PersonCenter.vue');
const Login = () => import('../views/Login.vue');
const Register = () => import('../views/Register.vue');
/* 
什么是路由懒加载，有什么优点？
vue SPA单页面应用 webapck js非常大 进入首屏内容过多，加载时间长 白屏 
路由懒加载将页面划分 分担首页加载的压力 用户体验提高
通过import()加载，模块会被单独打包为js文件 code split 
函数第一次请求时才会执行


*/

// 声明使用插件
Vue.use(VueRouter);
export default new VueRouter({
    mode: "history",
    // 注册路由
    routes: [{
            path: "/home",
            component: Home,
            meta: {
                show: true
            }
        },
        {
            path: "/jingxi",
            component: JingXi,
            meta: {
                show: true
            }
        },
        {
            path: "/personcenter",
            component: PersonCenter,
            // 路由元信息 路由记录
            meta: {
                show: true
            }
        },
        {
            path: "/login",
            component: Login
        },
        {
            path: "/register",
            component: Register
        }
    ]
});

/* 
vue-router中mode有两种模式
hash
history
不同
路径hash 路径中多个#  
history模式 正常路径


生产环境下

hash模式在服务器环境下运行没有问题
http://192.168.43.118:8080/index.html/#/home  
后端不会加载#后面的内容

history
pushState()  replaceState()  
http://192.168.43.118:8080/index.html/login
history模式的url发送请求跟服务器有关系，前端的url和服务器的url一致，否则手动输入url 刷新页面会报404错误，如果是history服务器需要特殊配置




*/